<template>
    <div class="edu-page-warp">
        <div class="sitemap">
            <span style="color:#C0C4CC">培养方案模板</span>
            <span style="color:#C0C4CC">/</span>
            <span style="color:#909399">{{ title }}模板</span>
        </div>
        <div class="edu-page-title">
            <span
                v-for="(item, index) in topNavItems"
                :class="{active: item.active}"
                :key="index"
                class="border-right"
                @click="clickItem(item)"
            >{{ item.label }}</span>
        </div>
        <el-card shadow="never" body-style="padding: 24px;">
            <template>
                <templateBaseInfo
                    v-if="focusIndex==0"
                    :next="next"
                    :template-id="templateId"
                    :is-read="isRead"
                />
                <courseCategoryForm
                    v-if="focusIndex==1"
                    :next="next"
                    :template-id="templateId"
                    :is-read="isRead"
                />
                <courseForm
                    v-if="focusIndex==2"
                    :next="next"
                    :template-id="templateId"
                    :schoolTerms="schoolTerms"
                    :is-read="isRead"
                />
                <!-- type字段属于后端在此组件校验接口时所传,接口被调用四次,在此处调用特传入后端校验字段type -->
                <schemeChapter
                    v-if="focusIndex==3"
                    :next="next"
                    :template-id="templateId"
                    :type="true"
                />
            </template>
        </el-card>
    </div>
</template>

<script>
import templateBaseInfo from "./templateBaseInfo";
import courseCategoryForm from "./courseCategoryForm";
import courseForm from "./courseForm";
// import schemePreview from "./schemePreview";
import schemeChapter from "./schemeChapter";

import Bus from "common/src/utils/bus";
import * as API from "common/src/api/culture/cultruescheme";
import {
    clearAllChangeStatus
} from 'common/src/api/culture/bachelor'

export default {
    name: "bcl-culture-template-detail",
    components: {
        templateBaseInfo,
        courseCategoryForm,
        courseForm,
        schemeChapter,
    },
    data() {
        return {
            projId: "",
            schoolTerms: "",
            // isGraduate: false,
            title: "",
            templateId: null, // 新建模板为空，编辑模板时保存模板id
            focusIndex: 0,
            isRead: false,
            topNavItems: [
                {
                    label: "基础信息",
                    index: 0,
                    active: true
                },
                {
                    label: "课程性质表单",
                    index: 1,
                    active: false
                },
                {
                    label: "课程表单",
                    index: 2,
                    active: false
                },
                {
                    label: "章节样例",
                    index: 3,
                    active: false
                }
            ]
        };
    },
    created() {
        this.projId = this.$route.params.projId;
        this.schoolTerms = this.$route.params.schoolTerms;
        if (this.$route.params.id) {
            this.title = "编辑";
            this.templateId = this.$route.params.id;
            if (this.$route.params.isRead) {
                this.title = "预览";
                this.isRead = true;
            }
        } else {
            this.title = "新建";
            Bus.$on("saveTemplate", templateId => {
                this.templateId = templateId;
                let path = `/bclCultureTemplateDetail/${
                    this.projId
                }/${templateId}`;
                this.$router.push(path);
            });
        }
    },
    beforeDestroy() {
        Bus.$off("saveTemplate");
        if(this.templateId){
            clearAllChangeStatus(this.templateId).then(res => {
                if (res.code == 200) {
                    console.log('sucess')
                }
            })
        }
    },
    methods: {
        clickItem(item) {
            if (this.hasSave()) {
                this.toggle(item.index);
            }
        },
        next(val = 1) {
            if (!this.hasSave()) {
                return false;
            }
            const len = this.topNavItems.length;
            if (val > 0) {
                if (this.focusIndex + 1 < len) {
                    this.focusIndex++;
                    this.toggle(this.focusIndex);
                }
            } else {
                if (this.focusIndex - 1 >= 0) {
                    this.focusIndex--;
                    this.toggle(this.focusIndex);
                }
            }
        },
        // 判断是否保存模板基本信息
        hasSave() {
            if (this.templateId == null) {
                this.$message({
                    type: "info",
                    message: "请先保存模板基础信息"
                });
                return false;
            }
            return true;
        },
        // 切换
        toggle(index) {
            this.topNavItems.forEach(item => {
                item.active = item.index === index;
            });
            this.focusIndex = index;
        }
    }
};
</script>

<style lang="scss" scoped>
.sitemap {
    font-size: 12px;
    margin-bottom: 15px;
}
.edu-page-title {
     margin-bottom: -1px;
    span {
        cursor: pointer;
        display: inline-block;
        padding-right: 20px;
        color: #8896a7;
        font-weight: 400;
        border-right: 0;
        font-size: 16px;
    }
    span.active {
        padding: 8px 15px;
        color: #66b1ff;
        background: #fff;
        font-weight: 500;
        font-size: 16px;

    }
}
.border-right {
    margin-right: 10px;
}
</style>
